<template>
  <div class="page-container">
    <!--表格内容栏-->
    <ac-table
      ref="dataTable"
      pkName="id"
      :filters="filters"
      :filterFields="filterFields"
      :columns="columns"
      @handleCellOperator="handleCellOperator"
    />

    <!--新增/编辑/查看界面-->
    <el-dialog
      v-model="dialogVisible"
      class="no-padding"
      :title="dialogTitle"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      fullscreen
    >
      <div class="page-container">
        <el-form
          :model="formData"
          ref="dataForm"
          label-width="120px"
          label-position="right"
          :disabled="!dialogEdit"
          :hide-required-asterisk="!dialogEdit"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="任务名称" prop="taskName">
                <el-input v-model="formData.taskName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始时间" prop="startTime">
                <el-input v-model="formData.startTime"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="执行时间" prop="executeTime">
                <el-input v-model="formData.executeTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="执行状态" prop="executeStatus">
                <el-input v-model="formData.executeStatus"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="新增总数量" prop="addCount">
                <el-input v-model="formData.addCount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="更新总数量" prop="updateCount">
                <el-input v-model="formData.updateCount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <!--表格栏-->
              <el-table
                ref="collectTable"
                width="100%"
                border
                :data="formData.tableLogList"
              >
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="originTable"
                  label="来源表"
                  min-width="120"
                />
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="targetTable"
                  label="目标表"
                  min-width="120"
                />
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="startTime"
                  label="开始时间"
                  width="160"
                >
                  <template #default="{row}">
                    {{date.formatLongDate(row.startTime)}}
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="endTime"
                  label="结束时间"
                  width="160"
                >
                  <template #default="{row}">
                    {{date.formatLongDate(row.endTime)}}
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="right"
                  prop="executeTime"
                  label="执行时间"
                  width="200"
                >
                  <template #default="{row}">
                    {{row.executeTime ? tool.formatTime(row.executeTime) : ''}}
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="executeStatus"
                  label="执行状态"
                  width="100"
                />
                <el-table-column
                  header-align="center"
                  align="right"
                  prop="originDataCount"
                  label="来源数量"
                  width="120"
                />
                <el-table-column
                  header-align="center"
                  align="right"
                  prop="addCount"
                  label="新增数量"
                  width="120"
                />
                <el-table-column
                  header-align="center"
                  align="right"
                  prop="updateCount"
                  label="更新数量"
                  width="120"
                />
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="errorMessage"
                  label="错误信息"
                  min-width="100"
                />
              </el-table>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <el-button 
          v-if="dialogEdit"
          size="default"
          type="info"
          @click="dialogVisible=false"
        >取消</el-button>
        <el-button 
          v-if="!dialogEdit"
          size="default"
          type="info"
          @click="dialogVisible=false"
        >关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import api from '@/http/api';
import tool from "@/utils/tool";
import date from "@/utils/date";

const filters = ref({
  name: ''
});

const filterFields = ref([
  {prop: "name", label: "任务名称"},
  {prop: "executeStatus", label: "执行状态", type: 'select', options: '执行中,执行成功,执行失败'},
]);

const columns = ref([
  {prop: "taskName", label: "任务名称", minWidth: 120, click: true},
  {prop: "startTime", label: "开始时间", width: 160, type: "datetime"},
  {prop: "endTime", label: "结束时间", width: 160, type: "datetime"},
  {prop: "executeTime", label: "执行时间", width: 200, align: 'right', formatter: (prop, value) => {
      return value ? tool.formatTime(value) : '';
    }
  },
  {prop: "executeStatus", label: "执行状态", width: 120},
  {prop: "addCount", label: "新增总数量", width: 120, align: 'right', type: 'number'},
  {prop: "updateCount", label: "更新总数量", width: 120, align: 'right', type: 'number'},
  {prop: "createTime", label: "创建时间", width: 160, type: "datetime"},
]);

const dataTable = ref();
const dataForm = ref();
const formData = ref({});
const dialogTitle = ref('');
const dialogVisible = ref(false);
const dialogEdit = ref(false);

const handleCellOperator = async(property, value, row) => {
  formData.value = Object.assign({}, await loadData(row.id));
  formData.value.startTime = date.formatLongDate(formData.value.startTime);
  formData.value.executeTime = tool.formatTime(formData.value.executeTime);
  dialogVisible.value = true;
  dialogEdit.value = false;
  dialogTitle.value = "查看";

  await nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};

const loadData = async(id) => {
  const res = await api.post('/system/collectTaskLog/queryBy', {id: id});
  return res.data || {};
};
</script>